<template>
  <div>
    <h1>App</h1>
    gender：{{ gender }} <br>
    cnGender：{{ cnGender }} <br>

    <button @click="cnGender = '女'">女</button>
    <button @click="cnGender = '男'">男</button>

  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const gender = ref(1);

const cnGender = computed({
  get() {
    return { 1: '男', 2: '女' }[gender.value];
  },
  set(value) {
    gender.value = { 男: 1, 女: 2 }[value];
  }
});





</script>